<template>
    <div>
        <ul>
            <li v-for="data in dataList"  :key="data.cid">
                {{data.public_name}}
                </li>
        </ul>

        <div v-hello>指令</div>
    </div>
</template>

<!-- <script>
// scoped  相当于是只在本组件内有用,其他的不会显示,如果不加,那么如果app引用了,本组件,就会受到app
// 组件里面的样式影响
</script> -->


<script>
import axios from 'axios'
import Vue from 'vue'
Vue.directive('hello',{
    inserted(el,binding){
        console.log(el)
    }
})
export default {
    data(){
        return{
            dataList:[]
        }
    },
    mounted () {
        // fetch('./home-api.json')
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res.data.list[0].icon_list)
        //     this.dataList = res.data.list[0].icon_list
        // })
        axios.get('./home-api.json').then(res=>{
            // res.data才是数据
            // console.log(res.data.data.list[0].icon_list)
           this.dataList = res.data.data.list[0].icon_list

})
    }
}
</script>


<style lang="scss" scoped>
 /* ul li{
  background: red;
 } */
//  相当于自定义的变量,代表宽度
 $width: 300px;
 ul{
    li{
    background: red;
    width: $width;
  }
 }
</style>
